<template>
  <div class="dormitory" style="height:740px">
    <div class="searchWord" style="margin-bottom:20px">
      <div style="display: inline-block">搜索：</div>
      <el-input
        v-model="search"
        style="display: inline-block;width: 560px"
        placeholder="请输入搜索内容"
      ></el-input>
      <el-button
        type="info"
        plain
        style="margin-left:20px"
        @click="dialogFormVisible2 = true"
        >添加菜单</el-button
      >
    </div>
    <!-- // 遍历表格 -->
    <div class="dormitoryData">
      <el-table
        border
        ref="dormitoryTable"
        :data="tables"
        tooltip-effect="dark"
        stripe
        style="width: 100%"
      >
        <el-table-column type="selection" width="45"></el-table-column>
        <el-table-column label="序号" type="index" width="65"></el-table-column>
        <el-table-column label="菜单名" prop="nameZh"></el-table-column>
        <el-table-column label="菜单路径" prop="path"></el-table-column>
        <el-table-column label="icon" prop="icon"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="info" plain @click="distribution(scope.row)"
              >菜单分配</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="yema" style="margin-top:80px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          ::current-page-sync="currentPage"
          :page-sizes="[8, 10, 15]"
          :page-size="pagesize"
          layout="total,jumper,prev, pager, next,sizes"
          :total="dormitory[0].sum"
        ></el-pagination>
      </div>
    </div>
    <el-dialog :visible.sync="dialogFormVisible">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="菜单名">
          <el-input v-model="form.nameZh"></el-input>
        </el-form-item>
        <el-form-item label="请选择角色">
          <el-select v-model="form.rid" placeholder="角色">
            <el-option label="管理员" value="1"></el-option>
            <el-option label="工人" value="2"></el-option>
            <el-option label="客户" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addroleMenu()">添加</el-button>
          <el-button type="primary" @click="deleteroleMenu()">删除</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog :visible.sync="dialogFormVisible2">
      <el-form
        ref="menuform"
        :model="menuform"
        :rules="rules"
        style="width:600px;margin:0 auto"
        label-width="80px"
      >
        <el-form-item label="菜单名称：" label-width="100px" prop="name">
          <el-input v-model="menuform.name" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="icon：" label-width="100px">
          <el-input v-model="menuform.icon" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="菜单路径：" label-width="100px" prop="path">
          <el-input v-model="menuform.path" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="parentId：" label-width="100px" prop="parentId">
          <el-input v-model="menuform.parentId" style="width:460px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit()">立即创建</el-button>
          <el-button @click="cancel()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dormitory: [
        {
          sum: 0,
        },
      ],
      currentPage: 1,
      pagesize: 8,

      search: "",
      menuform: {
        name: "",
        icon: "",
        path: "",
        parentId: "",
      },
      form: {
        rid: "",
        id: "",
        nameZh: "",
      },
      rules: {
        name: [{ required: true, message: "请输入菜单名", trigger: "blur" }],
        path: [{ required: true, message: "请输入路径", trigger: "blur" }],
      },
    };
  },
  computed: {
    tables() {
      const search = this.search;

      if (search) {
        return this.dormitory.filter((data) => {
          return Object.keys(data).some((key) => {
            return (
              String(data[key])
                .toLowerCase()
                .indexOf(search) > -1
            );
          });
        });
      }
      return this.dormitory;
    },
  },
  mounted() {
    this.showtable();
  },
  methods: {
    distribution(row) {
      this.dialogFormVisible = true;
      this.form = row;
    },
    handleSizeChange: function(size) {
      this.pagesize =size;
      
      console.log(this.pagesize);

       this.$axios({
        method: "get",
        params: {
          currentPage: this.currentPage,
          pagesize: size,
        },
        url: "/menu/findAllmenu",
      })
        .then((result) => {
          console.log(result.data.result);

          this.dormitory = result.data.result;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
      console.log(this.pagesize);
      console.log(currentPage);

      this.$axios({
        method: "get",
        params: {
          currentPage: this.currentPage,
          pagesize: this.pagesize,
        },
        url: "/menu/findAllmenu",
      })
        .then((result) => {
          console.log(result.data.result);

          this.dormitory = result.data.result;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    addroleMenu() {
      this.$axios({
        method: "post",
        data: {
          rid: this.form.rid,
          mid: this.form.id,
        },
        url: "/menu/addroleMenu",
      })
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.$message.success("分配权限成功");
            this.dialogFormVisible = false;
            this.$router.go(0);
          } else if (res.data.code == 400) {
            this.$message.error("该角色已有该菜单");
            this.dialogFormVisible = false;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    showtable() {
      this.$axios({
        method: "get",
        params: {
          currentPage: this.currentPage,
          pagesize: this.pagesize,
        },
        url: "/menu/findAllmenu",
      })
        .then((result) => {
          console.log(result.data.result);

          this.dormitory = result.data.result;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    deleteroleMenu() {
      this.$axios({
        method: "post",
        data: {
          rid: this.form.rid,
          mid: this.form.id,
        },
        url: "/menu/deleteroleMenu",
      })
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.$message.success("分配权限成功");
            this.dialogFormVisible = false;
            this.$router.go(0);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onSubmit() {
      console.log("sss");
      this.$refs.menuform.validate((valid) => {
        if (valid) {
          this.$axios({
            method: "post",
            data: {
              nameZh: this.menuform.name,
              parentId: this.menuform.parentId,
              icon: this.menuform.icon,
              path: this.menuform.path,
            },
            url: "/menu/addMenu",
          })
            .then((res) => {
              if (res.data.code == 200) {
                this.$message.success("添加成功");
                this.dialogFormVisible2 = false;
                this.showtable();
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }
      });
    },
    cancel() {
      this.$refs.menuform.resetFields();
      this.dialogFormVisible2 = false;

      this.showtable();
    },
  },
};
</script>
